<template>
  <view>
    <view class="list" v-for="(item, i) in list" :key="i">
      <view>序号: {{i+1}}</view>
      <view>用户名: {{item.username}}</view>
      <view>手机号: {{item.mobile}}</view>
      <view>Email:{{item.email}}</view>

      <view class="btn">
        <button @click="remove(item._id)">删除</button>
        <button @click="gotoDetail(item._id)">编辑</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: []
    };
  },
  onLoad() {
    this.getData();
  },
  methods: {
    // 获取数据方法，用于初始化和删除后重新获取数据
    getData() {
      uniCloud.callFunction({
        name: 'getUserList'
      }).then(res => {
        this.list = res.result.data;
      });
    },
    remove(_id) {
      console.log("-------------执行删除操作-------------");
      uniCloud.callFunction({
        name: "removeUser",
        data: { "id": _id },
        success: (e) => {
          console.log(e.result);
          uni.showToast({
            title: '删除成功',
            duration: 2000
          });
          this.getData();
        }
      })
    },
    gotoDetail(_id) {
      // 编辑逻辑，这里假设跳转到详情编辑页面并携带id参数
      uni.navigateTo({
        url: `/pages/detail/detail?id=${_id}`
      });
    }
  }
};
</script>

<style>
</style>